<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <title>Flash-VideoIO | Flash-based audio and video communication</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" href="http://myprojectguide.org/sites/default/files/garland_favicon.ico" type="image/x-icon" />
    <link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/book/book.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/node/node.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/defaults.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/system.css?w" />

<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/system-menus.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/user/user.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/forum/forum.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/sites/default/files/color/garland-a725207e/style.css?w" />
<link type="text/css" rel="stylesheet" media="print" href="http://myprojectguide.org/themes/garland/print.css?w" />
        <!--[if lt IE 7]>
      <link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/themes/garland/fix-ie.css" />    <![endif]-->

<style type="text/css">
pre { color: #606060; font-size: small; line-height: 1; }
pre.code { margin-left: 40px; margin-right: 40px; border: 1px dotted grey; padding: 4px 4px 4px 4px; color: #606060; }
b { color: #000000; }
ol { line-height: 1; }
div.info {margin-left: 40px; margin-right: 40px; border: 1px solid grey; padding: 4px 4px 4px 4px;}
p { text-align: justify; }
</style>

<script type="text/javascript">
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
function takeSnapshot() {
    getFlashMovie('video1').callProperty('takeSnapshot');
    var snapshot = getFlashMovie('video1').getProperty('snapshot');
    document.getElementById('size').innerHTML = snapshot.length + ' bytes';
    getFlashMovie('video2').setProperty('snapshot', snapshot);
}   
</script>


  </head>
  <body class="sidebar-right">

<!-- Layout -->
  <div id="header-region" class="clear-block"></div>

    <div id="wrapper">

    <div id="container" class="clear-block">

      <div id="header">
        <div id="logo-floater">
        <h1><a href="index.html" title="Flash-VideoIO - Flash-based audio and video communication"><img src="http://myprojectguide.org/sites/default/files/garland_logo.png" alt="Gurukul My Project Guide" id="logo" /><span>VideoIO</span> Flash-based audio and video communication</a></h1>
        </div>

                                                    
      </div> <!-- /header -->

      
      <div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">

<div class="breadcrumb"><a href="/">Home</a> › <a href="index.html">Flash-VideoIO Tutorial</a></div>

<div id="node-1" class="node">


  
  <div class="content clear-block">

<h2>How to do take snapshot image as binary data?</h2>
 
<p>The VideoIO object defines a <tt>takeSnapshot</tt> method and a 
<tt>snapshot</tt> property. The application invokes the method to take a
snapshot of the current video display. For live display, the snapshot 
uses the original video instead of the mirrored view. The following
example code shows how to take the snap shot, get the value of the 
image data, and set the value of the image data, on this page.</p>

<pre class="code">
// take the snapshot on video1's live display.
getFlashMovie('video1').callProperty('<b>takeSnapshot</b>');

// get the snapshot property as string of video1.
var snapshot = getFlashMovie('video1').getProperty('<b>snapshot</b>');

// set the snapshot property to video2.
getFlashMovie('video2').setProperty('<b>snapshot</b>', snapshot);
</pre>

<p>You can try out the demonstration by clicking on the "take snapshot"
button once your video shows up.</p>

<table style="width: 640px;">
<tr valign="top">
<td>
	<object type="application/x-shockwave-flash" data="VideoIO.swf"
		id="video1" width="320" height="240">
		<param name="movie" value="VideoIO.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#000000" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
        <param name="flashVars" value="controls=true&live=true" />
	</object>
    <br/>
    <input type="button" onclick="takeSnapshot();" value="take snapshot" />
    <div id="size"></div>
</td>
<td>
	<object type="application/x-shockwave-flash" data="VideoIO.swf"
		id="video2" width="320" height="240">
		<param name="movie" value="VideoIO.swf" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#000000" />
		<param name="allowFullScreen" value="true" />
		<param name="allowScriptAccess" value="always" />
	</object>
</td></tr></table>

<p>The string value of the snapshot property is the Base64 encoded
JPEG image data of the snapshot. Unlike regular Base64 encoding, this
string does not contain new lines. The application can decode the string
to JPEG bytes and write in a file on the back end if needed.</p>


</div>
          </div>

          <div id="footer">&copy; 2010-2011, Kundan Singh, All Rights Reserved.</div>
          
      </div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->

              <div id="sidebar-right" class="sidebar">

<div id="block-forum-0" class="clear-block block block-forum">

  <h2>In This Project</h2>

  <div class="content"><div class="item-list">
<ul><li class="first"><a href="index.html">Project Home</a></li>
</ul>
<ol>
<li class="last"><a href="1.html">Embedding</a></li>
<li class="last"><a href="2.html">Live camera view</a></li>
<li class="last"><a href="3.html">Media server</a></li>
<li class="last"><a href="4.html">Record a message</a></li>
<li class="last"><a href="5.html">Play video file</a></li>
<li class="last"><a href="6.html">Two-party call</a></li>
<li class="last"><a href="7.html">Video broadcast</a></li>
<li class="last"><a href="8.html">Multi-party conference</a></li>
<li class="last"><a href="9.html">P2P video call</a></li>
<li class="last"><a href="10.html">VideoIO API</a></li>
<li class="last"><a href="11.html">SIP/VoIP call</a></li>
</ol></div></div>
</div>

<div id="block-forum-1" class="clear-block block block-forum">

  <h2>References</h2>

  <div class="content"><div class="item-list"><ul><li class="first"><a href="http://myprojectguide.org">Gurukul - Student Project Guide</a></li>
<li class="last"><a href="http://code.google.com/p/videocity">Videocity - web video telephony and conference</a></li>
<li class="last"><a href="http://code.google.com/p/rtmplite">rtmplite - lightweight Flash media (RTMP) server in Python</a></li>
<li class="last"><a href="http://myprojectguide.org/node/6">Project Ideas on Multimedia Networking</a></li>
</ul></div></div>
</div>

              </div>

    </div> <!-- /container -->
  </div>
    </body>
</html>
